<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="70px" label-position="left" >
      <el-form-item label="渠道名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入渠道名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="结算方式" prop="signType">
        <el-select v-model="queryParams.signType" placeholder="请选择">
          <el-option label="uv" :value="1" />
          <el-option label="cpa" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="endTime">
        <div class="r_flex">
          <el-date-picker
            v-model="queryParams.alltime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @change="changtime"
          />
        </div>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermi="['system:channel:add']" type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh-left" size="mini" @click="getList">刷新</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-printer" size="mini" @click="daochu">乙方渠道pv记录列表</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-col>

      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />

    </el-row>

    <!-- 表格数据 -->
    <el-table
      v-if="refreshTable"
      v-loading="loading"
      stripe
      border
      :data="businessList"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{background: $store.state.app.theme.tableBack,color: $store.state.app.theme.tableColor}"
      @cell-dblclick="celldblclick"
    >
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="渠道名称" width="180px;" align="center" prop="name" />
      <!-- <el-table-column label="H5展示" align="center" prop="" /> -->
      <el-table-column label="分享页面跳转" align="center" prop="invitePage" width="100px">
        <template slot-scope="scope">
          <div v-if="scope.row.invitePage == 1">直接安装页</div>
          <div v-else-if="scope.row.invitePage == 2">留资页</div>
          <div v-else-if="scope.row.invitePage == 3">直接下载页</div>
          <div v-else-if="scope.row.invitePage == 4">注册贷超页</div>
          <div v-else-if="scope.row.invitePage == 5">留资贷超页</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="签约价格" sortable width="110px;" align="center" prop="price" />
      <el-table-column label="结算方式" align="center" prop="signType">
        <template slot-scope="scope">
          <div v-if="scope.row.signType === 1"> uv </div>
          <div v-if="scope.row.signType === 2"> cpa </div>
        </template>
      </el-table-column>
      <el-table-column label="推广码" align="center" prop="invite" />
      <el-table-column label="推广模板" align="center" prop="carProperty" width="140px" >
        <template slot-scope="scope">
          <div class="" >
            <div class="r_flex_center" v-if="scope.row.imgUrlData.length>0" >
              <el-image
                ref="previewImg"
                style="display: none;"
                :src="scope.row.imgUrlData[0]"
                :preview-src-list="scope.row.imgUrlData">
              </el-image>
              <p class="r_able_url r_cpter" @click="chakan" >
                <i class="el-icon-view"></i>
                {{scope.row.h5TemplateName ? scope.row.h5TemplateName : '点击查看'}}
              </p>
            </div>
            <p v-else >无预览图</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="投放链接" align="center" prop="inviteUrl" width="280px" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div class="r_able_url" >{{scope.row.inviteUrl}}</div>
        </template>
      </el-table-column>
      <el-table-column label="展示弹窗" align="center" prop="tcOpen">
        <template slot-scope="scope">
          <div>
            {{ scope.row.tcOpen === 1 ? '展示' : '不展示' }}
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="扣量比例" align="center" prop="deduct">
        <template slot-scope="scope">
          <div>
            {{ `${scope.row.deduct ? scope.row.deduct : 0}%` }}
          </div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="大额贷配置" align="center" prop="bigProduct">
        <template slot-scope="scope">
          <div v-if="scope.row.bigProduct == 0">全部展示</div>
          <div v-else-if="scope.row.bigProduct == 1">全部展示大额产品</div>
          <div v-else-if="scope.row.bigProduct == 2">全部展示小额产品</div>
          <div v-else>--</div>
        </template>
      </el-table-column> -->
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0"><el-tag type="info">下架</el-tag></div>
          <div v-else-if="scope.row.status == 1"><el-tag type="success">上架</el-tag></div>
          <div v-else>--</div>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" sortable align="center" prop="createTime" width="160px" />
      <el-table-column label="操作" width="180" fixed="right" align="center" v-if="checkPermi(['system:channel:edit', 'system:channel:remove'])" >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="jumpRouter(scope.row)">统计</el-button>
          <el-button v-hasPermi="['system:channel:edit']" size="mini" type="text" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" @click="shieldingUp(scope.row)">屏蔽渠道</el-button>
          <el-button v-hasPermi="['system:channel:remove']" v-if="scope.row.parentId != 0"  size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row :gutter="24" class="mb8" style="margin: 20px 0px">
      <el-col :span="24" style="display: flex; justify-content: flex-end; padding: 0px">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          @current-change="handlePageChange"
          @size-change="
            newSize => {
              queryParams.pageSize = newSize;
              getList();
            }
          "
        />
      </el-col>
    </el-row>

    <!-- 对话框-修改 -->
    <el-dialog :title="titleDialog === 'add' ? '添加乙方渠道' : '修改渠道信息'" :visible.sync="openDialog" width="1000px" append-to-body>
      <el-form label-position="left" ref="formDialog" :model="formDialog" :rules="rules" label-width="140px">
        <el-row :gutter="24">
          <el-col :span="1" style="height: 100px" ></el-col>
          <el-col :span="10">
            <el-form-item label="渠道名称" prop="name">
              <el-input v-model="formDialog.name" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="签约价格" prop="price">
              <el-input v-model="formDialog.price" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="结算方式" prop="signType">
              <el-select v-model="formDialog.signType" placeholder="请选择" style="width: 100%">
                <el-option label="uv" :value="1" />
                <el-option label="cpa" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="扣量比例" v-if="formDialog.signType === 2" prop="deduct">
              <el-input onkeyup="this.value=this.value.replace(/\D/g,'')" v-model="formDialog.deduct" placeholder="请输入整数，单位是%" >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="乙方负责人" prop="contact">
              <el-input v-model="formDialog.contact" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="分享页跳转" prop="invitePage">
              <el-select v-model="formDialog.invitePage" placeholder="请选择" style="width: 100%">
                <!-- <el-option label="直接安装页" :value="1" /> -->
                <el-option label="留资页" :value="2" />
                <!-- <el-option label="直接下载页" :value="3" /> -->
                <el-option label="注册贷超页" :value="4" />
                <el-option label="留资贷超页" :value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="H5推广模板" prop="h5TemplateId">
              <el-select @change="h5TemplateChange" v-model="formDialog.h5TemplateId" placeholder="请选择" style="width: 100%">
                <el-option v-for="(H5data, index) in H5Array" :key="index" :label="H5data.title" :value="H5data.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="模型预览" prop="productData">
              <div v-show="formDialog.h5TemplateUrlList.length>0" class="r_flex_center" style="justify-content: flex-start;" >
                <div class="yuanlan_list r_flex_center" style="margin-right: 10px;" :key="index" v-for="(data, index) in formDialog.h5TemplateUrlList" >
                  <el-image 
                    :src="data.url" 
                    :preview-src-list="[data.url]">
                  </el-image>
                </div>
              </div>
              <div v-show="!(formDialog.h5TemplateUrlList.length>0)" >
                暂无预览
              </div>
            </el-form-item>

          </el-col>
          <el-col :span="2" style="height: 100px" ></el-col>
          <el-col :span="10">
            <el-form-item label="是否上架" prop="status">
              <el-radio-group v-model="formDialog.status">
                <el-radio :label="1">上架</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="首页挽留弹窗" prop="indexRetain">
              <el-radio-group v-model="formDialog.indexRetain">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="留资页挽留弹窗" prop="lzRetain">
              <el-radio-group v-model="formDialog.lzRetain">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="大额贷挽留弹窗" prop="productRetain">
              <el-radio-group v-model="formDialog.productRetain">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="极速贷挽留弹窗" prop="jisuRetain">
              <el-radio-group v-model="formDialog.jisuRetain">
                <el-radio :label="1">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="弹窗展示" prop="tcOpen">
              <el-radio-group v-model="formDialog.tcOpen">
                <el-radio :label="1">展示</el-radio>
                <el-radio :label="0">不展示</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- <el-form-item label="外链跳转" prop="vxStatus">
              <el-radio-group v-model="formDialog.vxStatus">
                <el-radio :label="1">开</el-radio>
                <el-radio :label="0">关</el-radio>
              </el-radio-group>
            </el-form-item> -->

            <el-form-item label="微信页面拦截" prop="vxIntercept">
              <el-radio-group v-model="formDialog.vxIntercept">
                <el-radio :label="1">开</el-radio>
                <el-radio :label="0">关</el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- <el-form-item label="外链跳转" prop="vxStatus">
              <el-switch
                v-model="formDialog.vxStatus"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                inactive-color="#bebdbf"
              />
            </el-form-item> -->

            <!-- <el-form-item label="立即领取配置" prop="dcDraw">
              <el-radio-group v-model="formDialog.dcDraw">
                <el-radio :label="1">显示公众号</el-radio>
                <el-radio :label="2">显示产品</el-radio>
              </el-radio-group>
            </el-form-item> -->

            <!-- <el-form-item label="弹窗展示产品" prop="productId" v-show="formDialog.tcOpen==1" >
              <el-select v-model="formDialog.productId" placeholder="请选择" style="width: 100%">
                <el-option v-for="(jisudata, index) in jisuArray" :key="index" :label="jisudata.name" :value="jisudata.id" />
              </el-select>
            </el-form-item> -->

          </el-col>
          <el-col :span="1" style="height: 100px" ></el-col>

        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoad" @click="submitForm">确 定</el-button>
        <el-button @click="openDialog = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 屏蔽渠道配置 -->
    <el-dialog title="屏蔽配置" :visible.sync="shieldingOpen" width="1000px" append-to-body>
      <h3 style="margin-bottom: 20px;" >屏蔽渠道配置</h3>
      <div class="r_flex" >
        <div class="r_flex_center" style="margin-right: 30px">
          <p style="width: 90px" >渠道名称</p>
          <el-input v-model="queryShielding.deptName" placeholder="请输入渠道名称" clearable @keyup.enter.native="handleQuery" />
        </div>
        <div class="r_flex_center" >
          <p style="width: 90px" >产品名称</p>
          <el-input v-model="queryShielding.productName" placeholder="请输入产品名称" clearable @keyup.enter.native="handleQuery" />
        </div>

        <el-button type="primary" style="margin-left: 20px;" icon="el-icon-search" size="mini" :loading="getShielding" @click="getListShielding">搜索</el-button>
      </div>

      <div class="shieldingcenter" >
        <!-- 表格数据 -->
        <div class="shieldingTable scrollBorder"  v-loading="shielding_loading" >
          <div class="sheling_list" v-for="(shieldingData, keyName) in shieldingList" :key="keyName" v-show="shieldingData.name != '极速贷列表'" >
            <!-- 甲方渠道名称 -->
            <div class="sheling_title">

              <div>
                  <div class="checkbox_border r_flex_wrap"  style="cursor: pointer;" >
                    <div class="checkbox_list r_text_none" @click="allshieChange(shieldingData)" >
                      <div class="checkbox_icon r_flex_center" :class="shieldingData.active?'active_icon':''">
                        <i class="el-icon-check" />
                      </div>
                      <span style="font-weight: 700; color: #333;" >{{shieldingData.name}}</span>
                    </div>
                  </div>
              </div>

              <div class="r_flex son_border" >
                <div v-for="(sonData, index) in shieldingData.content" :key="index" >
                  <div class="checkbox_border r_flex_wrap">
                    <div class="checkbox_list r_text_none" @click="allcityChange(sonData)">
                      <div class="checkbox_icon r_flex_center" :class="sonData.active?'active_icon':''">
                        <i class="el-icon-check" />
                      </div>
                      <span>{{sonData.productName}}</span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <!-- 屏蔽极速贷列表 -->
      <h3 style="margin-bottom: 20px;" >屏蔽极速贷列表</h3>
      <div class="shieldingcenter" >
        <!-- 表格数据 -->
        <div class="shieldingTable scrollBorder"  v-loading="shielding_loading" >
          <div class="sheling_list" v-for="(shieldingData, keyName) in shieldingList" :key="keyName" v-show="shieldingData.name == '极速贷列表'" >
            <!-- 甲方渠道名称 -->
            <div class="sheling_title">

              <div>
                  <div class="checkbox_border r_flex_wrap"  style="cursor: pointer;" >
                    <div class="checkbox_list r_text_none" @click="allshieChange(shieldingData)" >
                      <div class="checkbox_icon r_flex_center" :class="shieldingData.active?'active_icon':''">
                        <i class="el-icon-check" />
                      </div>
                      <span style="font-weight: 700; color: #333;" >{{shieldingData.name}}</span>
                    </div>
                  </div>
              </div>

              <div class="r_flex son_border" >
                <div v-for="(sonData, index) in shieldingData.content" :key="index" >
                  <div class="checkbox_border r_flex_wrap">
                    <div class="checkbox_list r_text_none" @click="allcityChange(sonData)">
                      <div class="checkbox_icon r_flex_center" :class="sonData.active?'active_icon':''">
                        <i class="el-icon-check" />
                      </div>
                      <span>{{sonData.productName}}</span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitShielding">确 定</el-button>
        <el-button @click="shieldingOpen = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { channelList, delChannel, getChannel, upChannel, addChannel, templateList, jisuProductList, hideProductList, addBatch } from '@/api/business/system'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import { allUser, changeUserStatus, recordExport } from '@/api/system/user'

export default {
  name: 'ChannelBuy',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '' && this.formDialog.tcOpen == 1 ) {
        callback(new Error('该项不能为空'));
      } else {
        callback();
      }
    };
    return {
      // 遮罩层
      loading: true,
      shielding_loading: true,
      // 修改渠道loading
      submitLoad: false,
      // 显示搜索条件
      showSearch: false,
      // 表格树数据
      businessList: [],
      shieldingList: [],
      // 对话框类型
      titleDialog: '',
      // 是否显示对话框
      openDialog: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      hieldingExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        channelType:1,
        pageNum: 1, // 当前页数
        pageSize: 10, // 分页大小
        alltime: '',
        signType: '',
        startTime: '',
        endTime: '',
        name: '', // 渠道名
        contact: '', // 我方负责人
        status: '' // 上架状态，0下架，1上架
      },
      getShielding: true,
      // 查询参数
      queryShielding: {
        // pageNum: 1, // 当前页数
        // pageSize: 100, // 分页大小
        deptName: '',
        productName: '',
        alltime: '',
        startTime: '',
        endTime: '',
      },
      // 数据总条数
      totalPage: 0,
      totalPageShielding: 0,
      // 表单参数
      formDialog: {
        bigProduct: '',
        h5TemplateId: '',
        invitePage: '',
        deduct: '',
        vxIntercept: '',
        vxStatus: '',
        name: '',
        productId: '',
        productData: '',
        signType: '',
        status: 1,
        tcOpen: '',
        price: '',
        contact: '',
        contactPhone: '',
        h5TemplateUrlList: [],
        indexRetain: 0,
        lzRetain: 0,
        productRetain: 0,
        jisuRetain: 0,
        dcDraw: 1

        // createBy: "",
        // createTime: "",
        // deduct: 0,
        // deductRateId: 0,
        // // id: "",
        // invite: "",
        // inviteUrl: "",
        // // ownerId: 0,
        // ownerName: "",
        // params: {},
        // searchValue: "",
        // updateBy: "",
      },
      shieldingOpen: false,
      // 屏蔽渠道配置
      shieldingActive: {},
      shielding_form: {
        value1: [],
      },
      buttonLoading: false,
      // h5模板数组
      H5Array: [],
      // 极速贷数组
      jisuArray: [],
      // 新增表单校验
      rules: {
        productId: [{ validator: validatePass, trigger: 'blur' }],
        name: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        signType: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        ownerName: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        invitePage: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        tcOpen: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        inviteUrl: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        contact: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        contactPhone: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        h5TemplateId: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    // 分页数据
    this.getList()
    // h5模板数据
    this.getH5List()
    // 极速贷数据
    this.getjisuList()
  },
  methods: {
    checkPermi,
    // 时间选择
    changtime(newtime) {
      this.queryParams.startTime = newtime ? newtime[0] : ''
      this.queryParams.endTime = newtime ? newtime[1] : ''
    },
    async daochu() {
      const response = await recordExport(this.queryParams)
      // console.log(response, 'response')
      let blobUrl = window.URL.createObjectURL(response);
      const a = document.createElement('a');
      a.download = '乙方渠道pv记录列表';
      a.href = blobUrl;
      a.click();
    },
    allcityChange(data) {
      data.active = !data.active
      data.changeKey = true;
      this.allshieActives()
      this.$forceUpdate()
    },
    allshieChange(data) {
      data.active = !data.active
      if(data.active) {
        data.content.map(res=>{ res.active = true; res.changeKey = true; })
      } else {
        data.content.map(res=>{ res.active = false; res.changeKey = true; })
      }
    },
    // 屏蔽渠道遍历 是否全渠道全选
    allshieActives() {
      for (const key in this.shieldingList) {
        const data = this.shieldingList[key];
        data.active = true
        data.content.filter(son=>{
          if(!son.active) { data.active = false }
        })
      }
    },
    // 渠道配置
    submitShielding() {
      this.buttonLoading = true
      const parm = []
      for (const key in this.shieldingList) {
        const data = this.shieldingList[key];
        data.content.map(son=>{
          if (son.changeKey) {
            parm.push({
              type: son.deptName == '极速贷列表' ? 2 : 1,
              id: son.id, // 乙方渠道id
              channelId: this.shieldingActive.id, // 乙方渠道id
              channelName: this.shieldingActive.name,	// 乙方渠道名称
              deptId: son.deptId, // 甲方渠道id
              deptName: son.deptName, // 甲方渠道名称
              productId: son.productId,	// 大额贷产品id
              productName: son.productName,	// 大额贷名称
              delFlag: son.active ? '0' : '2', // 删除标志（0代表存在 2代表删除）
            })
          }
        })
      }
      const newparm = JSON.stringify(parm)

      addBatch(newparm).then(res=>{
        this.$modal.msgSuccess('修改屏蔽渠道成功')
        this.buttonLoading = false
        this.shieldingOpen = false
      })
    },
    shieldingUp(data) {
      this.shieldingActive = data
      this.shieldingOpen = true
      this.getListShielding()
    },
    chakan() {
      this.$refs.previewImg.showViewer = true
    },
    // 跳转数据统计
    jumpRouter(data) {
      this.$router.push({ path: "/dataControl/dataBuy", query: { id: data.id, name: data.name } });
    },
    // 查询列表
    getList() {
      this.loading = true
      channelList(this.queryParams)
        .then(response => {
          this.businessList = response.rows
          this.businessList.map(data=>{
            data.imgUrlData = data.h5TemplateUrlList.map(img=>img.url)
          })
          this.totalPage = response.total
          this.loading = false
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 屏蔽渠道管理 - 查询列表
    getListShielding() {
      this.getShielding = true
      this.shielding_loading = true
      this.queryShielding.channelId = this.shieldingActive.id
      this.buttonLoading = true
      hideProductList(this.queryShielding)
        .then(response => {
          this.shieldingList = []
          for (const key in response.data) {
            const data = response.data[key];
            data.map(son=>{
              son.active = son.delFlag=='0' ? true : false
              son.changeKey = false
            })
            this.shieldingList.push({name: key, content: data, active: false})
          }
          this.totalPageShielding = response.total
          this.shielding_loading = false
          this.getShielding = false
          this.buttonLoading = false
          this.allshieActives()
        })
        .finally(() => {
          this.getShielding = false
          this.buttonLoading = false
          this.shielding_loading = false
        })
    },
    // 查询极速贷数据
    getjisuList() {
      this.loading = true
      jisuProductList({ pageNum: 1, pageSize: 999 }).then(response => {
        this.jisuArray = response.rows
      })
    },
    // 查询H5模板列表
    getH5List() {
      templateList({ pageNum: 1, pageSize: 999 }).then(response => {
        this.H5Array = response.rows
      })
    },
    // 新增按钮操作
    handleAdd() {
      // 如果是新增 重置新增表数据
      if (this.formDialog.id) {
        this.formDialog = this.$options.data().formDialog
      }
      this.openDialog = true
      this.titleDialog = 'add'
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList()
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 删除按钮操作
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除?')
        .then(function() {
          return delChannel(row.id)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.loading = true
      const upId = row.id
      getChannel(upId)
        .then(response => {
          this.loading = false
          this.openDialog = true
          this.titleDialog = 'up'
          this.formDialog = response.data
          this.yulanimg()
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 模板切换
    h5TemplateChange(data){
      const newTemp = this.H5Array.filter(H5Data=>{ if(H5Data.id==data){ return H5Data} })[0]
      console.log(newTemp, 'data')
      this.formDialog.h5TemplateUrlList = newTemp.sysOssList
    },
    // 遍历预览图片
    yulanimg() {
      if (this.formDialog.h5TemplateUrlList.length>0) {
        this.formDialog.h5ImgList = this.formDialog.h5TemplateUrlList.map(value=>value.url)
        // console.log(this.formDialog.h5ImgList)
      }
    },
    // 修改节目 确定操作
    submitForm() {
      this.$refs['formDialog'].validate(valid => {
        if (valid) {
          this.submitLoad = true
          if (this.titleDialog === 'add') {
            addChannel(this.formDialog)
              .then(() => {
                this.submitLoad = false
                this.openDialog = false
                this.getList()
                this.$modal.msgSuccess('新增成功')
              })
              .catch(() => {
                this.submitLoad = false
              })
          } else {
            upChannel(this.formDialog)
              .then(() => {
                this.submitLoad = false
                this.openDialog = false
                this.getList()
                this.$modal.msgSuccess('修改成功')
              })
              .catch(() => {
                this.submitLoad = false
              })
          }
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: '',
        deptName: '',
        pdAmount: '',
        tag: '',
        leader: '',
        type: '',
        url: '',
        zkStatus: '1'
      }
      this.resetForm('form')
    },
    // 分页请求
    handlePageChange(data) {
      this.queryParams.pageNum = data
      this.getList()
    },
    // 分页请求-渠道屏蔽
    shieldingPageChange(data) {
      this.queryShielding.pageNum = data
      this.getListShielding()
    },
    // 双击复制
    celldblclick(row, column, cell, event) {
      if (!column.property) return
      if (!row[column.property]) return
      const oInput = document.createElement('input')
      oInput.value = row[column.property]
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message.success({
        message: '复制成功',
        showClose: true
      })
      oInput.remove()
    }
  }
}
</script>

<style  >
.el-image img{
  max-height: 30px;
}
</style>

<style lang="scss" scoped>
// 屏蔽渠道产品列表
.shieldingcenter{
  margin-top: 0px;
  .shieldingTable{
    flex-wrap: wrap;
    display: flex;
    align-content: flex-start;
    padding: 0 20px;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 20px;
  }
  .data_top_title{
      padding: 9.997px 0px;
      >div>i{
          display: block;
          width: 3.9975px;
          height: 19.5px;
          background: #0A8DFF;
          border-radius: 3.003px;
          margin-top: 2.002px;
      }
      p{
          display: block;
          font-weight: 900;
          line-height: 35.997px;
          height: 35.997px;
          color: #333;
          margin-left: 9.997px;
          font-size: 17.9985px;
          margin-top: 2px;
      }
  }
  .sheling_list{
    width: 100%;
    margin-bottom: 14px;
  }
  .data_top_title{
    padding: 0px;
  }
  .checkbox_border{
    margin-bottom: 8px;
    min-width: 130px;
  }
  .son_border{
    flex-wrap: wrap;
    display: flex;
    align-content: flex-start;
    margin-right: 60px;
    padding: 0 20px;
  }
}

</style>
